<template>
  <div>
    <div class="header">
      <div class="header-left">
        <router-link to="/vacation">
          <div class="iconfont back-icon">&#xe607;</div>
        </router-link>
      </div>
      <div class="header-search">
        <div class="iconfont icon-search">&#xe605;</div>
        <div class="search-ipt">
          <input class="ipt" type="text" placeholder="国家/城市/关键词">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';

.header {
  display: flex;
  height: 0.88rem;
  background: $bgColor;
  justify-content space-around
  align-items center
}

.back-icon {
  text-align: center;
  font-size: 0.4rem;
  color: #fff;
  line-height: 0.88rem;
}

.header-search {
  width 6.3rem
  height: 0.6rem;
  background: #fff;
  border-radius: 0.3rem;
  position relative
}

.icon-search {
  display: block;
  margin-left: 0.12rem;
  margin-right: 0.12rem;
  color: #ccc;
  line-height .6rem
  background-position: -1.5rem -1rem;
}

.search-ipt {
  position absolute
  top .08rem
  left 0.6rem

}

.ipt {
  width 5.5rem
}
</style>